<template>
    <div style="padding: 20px">
        <el-form ref="form" :model="form" >
            <LitigationApplicationOrder :info="form" />
            <LitigationApplicationLitigation :info="form"/>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同信息</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="租赁合同:" prop="leaseFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :up-type="2" :limit="1" v-model="form.leaseFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="买卖合同:" prop="tradeFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :up-type="2" :limit="1" v-model="form.tradeFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="担保合同:" prop="assureFile">
                            <div class="flex">
                                <ImageCommon  disabled info="" :up-type="2" :limit="20" v-model="form.assureFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>交车信息</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item label="出库交车单:" prop="outShedDeliveryFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :up-type="2" :limit="20" v-model="form.outShedDeliveryFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="还车交车单:" prop="rerurnCarDeliveryFile" v-if="form.rerurnCarDeliveryFile">
                            <div class="flex">
                                <ImageCommon disabled :up-type="2"  info="" :limit="20" v-model="form.rerurnCarDeliveryFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>客户回单发票</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="客户银行回单:" prop="bankReceiptFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :up-type="2" :limit="1" v-model="form.bankReceiptFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户发票单:" prop="invoiceFile">
                            <div class="flex">
                                <ImageCommon disabled info="" :up-type="2" :limit="1" v-model="form.invoiceFile"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>费用信息</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="累计未结清费用:" prop="allNoPayoffCost">
                            <span >{{ format_thousand(form.allNoPayoffCost) }}</span>
                            <!-- <el-input maxlength="50"  v-model="form.allNoPayoffCost" disabled placeholder="请选取订单编号"></el-input> -->
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <!-- 未结清 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内已生成账单未结清费用</span>
                    <span></span>
                </div>
                <el-descriptions title="" class="costSty">    
                    <el-descriptions-item label="费用总计">
                        <span >{{ format_thousand(form.contractNoPayoffCost) }}</span> 
                    </el-descriptions-item>
                </el-descriptions>
                <el-collapse v-model="activeNames" @change="handleChange" v-for="(item,index) in form.resultOverDueVoList" :key="index">
                    <el-collapse-item title="一致性 Consistency" name="1">
                        <template slot="title">
                            <span>车牌号:</span><span style="margin-right: 15px;">{{ item.carCode|filterNull }}</span>
                            <span>品牌/车系/车型:</span><span>{{ item.brandName }}{{ item.seriesName }}{{ item.modelName }}</span>
                        </template>
                        <el-table fit :data="item.costContractList" border >
                            <el-table-column prop="proceedsTypeStr" label="费用类型">
                                <template v-slot="{row}">
                                    <dict-tag :options="dict.type.progress_litigation" :value="row.proceedsTypeStr"/>
                                </template>
                            </el-table-column>
                            <el-table-column prop="receivableAmount" label="费用金额">
                                <template v-slot="{row}">
                                    <el-input v-model="row.receivableAmount" v-thousand :disabled="formState && formState !== 'write'" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="periodsNum" label="期数"></el-table-column>
                            <el-table-column prop="overdueDay" label="逾期天数"></el-table-column>
                            <el-table-column prop="repaymentTime" label="应收日期"></el-table-column>
                        </el-table>
                    </el-collapse-item>
                    </el-collapse>
            </div>
            <!-- 已结清 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内已生成账单已结清费用</span>
                    <span></span>
                </div>
                <el-descriptions title="" class="costSty">    
                    <el-descriptions-item label="费用总计">
                       <span >{{ format_thousand(form.contractPayoffCost) }}</span> 
                    </el-descriptions-item>
                </el-descriptions>
                <el-collapse v-model="activeNames1" @change="handleChange1" v-for="(item,index) in form.resultVoList" :key="index">
                    <el-collapse-item title="一致性 Consistency" name="1">
                        <template slot="title">
                        <span>车牌号:</span><span style="margin-right: 15px;">{{ item.carCode|filterNull }}</span>
                        <span>品牌/车系/车型:</span><span>{{ item.brandName }}{{ item.seriesName }}{{ item.modelName }}</span>
                        </template>
                        <el-table fit :data="item.costContractList" border v-if="tableCloumns.length > 0">
                            <TableCloumn v-for="item in tableCloumns" :cellOptions="item"></TableCloumn>
                            <el-table-column
                                    label="收款凭证"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <ImageCommon disabled info="" :up-type="2" :limit="20" v-model="scope.row.earningProve"></ImageCommon>
                                    </template>
                            </el-table-column>
                            <el-table-column
                                    label="发票"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <ImageCommon disabled info="" :up-type="2" :limit="20" v-model="scope.row.url"></ImageCommon>
                                    </template>
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>
                    </el-collapse>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内或合同期外未还车发生诉讼产生的未结清费用</span>
                    <span></span>
                </div>
                <el-descriptions title="" style="position: relative;" class="costSty">    
                    <el-descriptions-item label="费用总计">
                        <span >{{ format_thousand(form.contractOverdueCost) }}</span>
                        <el-button type="primary" class="btn_sty" @click="addFess" :disabled="formState && formState !== 'write' && addMoneyStatus">添加费用</el-button>
                    </el-descriptions-item>
                </el-descriptions>
                    <el-table fit :data="form.overdueVoList" border style="margin-top:10px">
                        <el-table-column prop="carCode" label="车牌号"  fixed="left" width="100" align="center">
                            <!-- <template v-slot="{row}">
                                <el-input v-model="row.carCode"></el-input>
                            </template> -->
                        </el-table-column>
                        <el-table-column prop="overdueCost" label="超期租金" width="100" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.overdueCost" v-thousand :disabled="formState && formState !== 'write'"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="defaultCost" label="违约金" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.defaultCost" v-thousand :disabled="formState && formState !== 'write'"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="peccanCost" label="违章费" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.peccanCost" v-thousand :disabled="formState && formState !== 'write'"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="carDamageCost" label="车损费用" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.carDamageCost" v-thousand :disabled="formState && formState !== 'write'"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="depreciationCost" label="加速折旧费" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.depreciationCost" v-thousand :disabled="formState && formState !== 'write'"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="overMileageCost" label="超里程费" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.overMileageCost" v-thousand :disabled="formState && formState !== 'write'"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="balanceCost" label="尾款" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.balanceCost" v-thousand :disabled="formState && formState !== 'write'"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="customClaimCost" label="客户理赔款" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.customClaimCost" v-thousand :disabled="formState && formState !== 'write'"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="otherCost" label="其他扣款费用" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.otherCost" v-thousand :disabled="formState && formState !== 'write'"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column v-for="(item,index) in titleList" :key="item"  min-width="150" align="center">
                            <template slot="header" slot-scope="scope">
                               <span>{{ item }}</span>
                               <i class="el-icon-delete delet_tit" @click="titDelet(item)" :disabled="formState && formState !== 'write'"></i>
                            </template>
                            <template slot-scope="scope">
                                <el-input v-model="scope.row[item]" v-thousand :disabled="formState && formState !== 'write'"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>

            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>其他未结清费用</span>
                    <span></span>
                </div>
                <el-descriptions title="" class="costSty">    
                    <el-descriptions-item label="费用总计">
                        <span >{{ format_thousand(form.otherNoPayoffCost) }}</span>
                    </el-descriptions-item>
                </el-descriptions>
                    <el-table fit :data="form.otherVoList" border style="margin-top:10px;margin-bottom: 10px;" >
                        <el-table-column prop="costType" label="费用类型"  align="center" >
                            <template slot-scope="scope">
                                <el-form-item :prop="'otherVoList.' + scope.$index + '.costType'" :rules="rules.costType">
                                    <el-input v-model="scope.row.costType" maxlength="20" :disabled="formState && formState !== 'write'" ></el-input>
                                </el-form-item>  
                            </template>
                        </el-table-column>
                        <el-table-column prop="cost" label="费用金额(元)" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="'otherVoList.' + scope.$index + '.cost'" :rules="rules.cost">
                                    <el-input v-model="scope.row.cost" v-thousand :disabled="formState && formState !== 'write'" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                </el-form-item> 
                                
                            </template>
                        </el-table-column>
                        <el-table-column prop="file" label="附件" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="'otherVoList.' + scope.$index + '.file'" :rules="rules.file">
                                    <Image-common v-model="scope.row.file" :disabled="formState && formState !== 'write'" />
                                </el-form-item>
                                
                            </template>
                        </el-table-column> 
                        <el-table-column  label="操作" align="center">
                            <template v-slot="{row}">
                                <el-button type="text" size="small" @click="deletCostItem(row)" :disabled="formState && formState !== 'write'">删除</el-button>
                            </template>
                        </el-table-column> 
                    </el-table>
                    <el-button icon="el-icon-plus" @click="addCostItem" :disabled="formState && formState !== 'write'">添加费用项</el-button>
            </div>
        </el-form>
        <el-dialog title="添加表格列" :visible.sync="dialogFormVisible" :modal='false' :close-on-click-modal="false" width="30%">
            <el-input v-model="colName" placeholder="请输入要增加的列名" style="width: 100%;"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="getcol()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>


import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";
import LitigationApplicationLitigation from '@/views/collectionManagement/litigationApplication/compoent/litigation.vue'
import LitigationApplicationOrder from '@/views/collectionManagement/litigationApplication/compoent/order.vue'


export default {
    components: {TableCloumn,LitigationApplicationLitigation,LitigationApplicationOrder},
    dicts: ['progress_litigation'],
    name:'ApplicationInfo',
    data() {
        return {
            companyList: [],
            belongCompanyList:[],
            first:true,
            tableCloumns: [ ],
            typeList:[],
            rules:{
                orderCode: [
                    { required: true, message: '请选择订单编号', trigger: 'change' },
                ],
                proceedReason: [
                    { required: true, message: '请输入诉讼申请原因', trigger: 'blur' },
                ],
                proceedPlan: [
                    { required: true, message: '请输入诉讼方案', trigger: 'blur' },
                ],
                payeeType:[
                    { required: true, message: '请输入费用类型', trigger: 'blur' },
                ],
                custMoney:[
                    { required: true, message: '请输入费用金额', trigger: 'blur' },
                ],
                inspectionInvoiceUrl:[
                    { required: true, message: '请上传附件', trigger: 'blur' },
                ],
                costType:[
                    { required: true, message: '请输入费用类型', trigger: 'blur' },
                ],
                cost:[
                    { required: true, message: '请输入金额', trigger: 'blur' },
                ]
            },
            activeNames:1,
            activeNames1:1,
            titleList:[],
            dialogFormVisible:false,
            colName: '',
            addMoneyStatus:true
        };
    },
    props: {
        value: {
            default: {},
        },
        state: {
            default: "write",
        },
        formStatus: {
            required: false,
        },
    },
    computed:{
        formState: {
            get() {
                let state = "write";
                if (Reflect.has(this, "formStatus")) {
                    switch (this?.formStatus?.toString()) {
                        case "0":
                            state = "write";
                            break;
                        case "1":
                            state = "disabled";
                            break;
                        case "2":
                            state = "hidden";
                            break;
                        default:
                            state = this.state;
                            break;
                    }
                }
                return state;
            },
        },
        form:{
            get() {
                return this.value;
            },
            set(value) {
                this.$emit("input", value);
            },
        },
    },
    watch:{
        titleList:{
            deep:true,
            handler(val){
                this.titleList = val
            }
        },
        form:{
            deep:true,
            handler(val){
                this.form = val
                // 合同期内或合同期外未还车发生诉讼产生的未结清费用
                let num = 0 
                 val?.overdueVoList?.map((res)=>{
                    if(res?.overdueCost){
                        num = Number(res?.overdueCost) + Number(num)
                    } 
                    if(res?.defaultCost){
                        num = Number(res?.defaultCost) + Number(num)
                    }
                    if(res?.peccanCost){
                        num = Number(res?.peccanCost) + Number(num)
                    }
                    if(res?.carDamageCost){
                        num = Number(res?.carDamageCost) + Number(num)
                    }
                    if(res?.depreciationCost){
                        num = Number(res?.depreciationCost) + Number(num)
                    }
                    if(res?.overMileageCost){
                        num = Number(res?.overMileageCost) + Number(num)
                    }
                    if(res?.balanceCost){
                        num = Number(res?.balanceCost) + Number(num)
                    }
                    if(res?.customClaimCost){
                        num = Number(res?.customClaimCost) + Number(num)
                    }
                    if(res?.otherCost){
                        num = Number(res?.otherCost) + Number(num)
                    }

                    // num = parseFloat(Number(res?.overdueCost?.toFixed(2))) 
                    // + parseFloat(Number(res?.defaultCost?.toFixed(2)))
                    // + parseFloat(Number(res?.peccanCost?.toFixed(2))) + parseFloat(Number(res?.carDamageCost?.toFixed(2)))
                    // + parseFloat(Number(res?.depreciationCost?.toFixed(2))) + parseFloat(Number(res?.overMileageCost?.toFixed(2)))
                    // + parseFloat(Number(res?.balanceCost?.toFixed(2))) + parseFloat(Number(res?.customClaimCost?.toFixed(2)))
                    // + parseFloat(Number(res?.otherCost?.toFixed(2))) 
                    
                })
                let otherNum = 0
                if(this.titleList?.length>0){
                    this.titleList?.map((item)=>{
                        val.overdueVoList?.map((item1)=>{
                            otherNum =  Number(item1[item]) + Number(otherNum)
                        })
                    })
                }
                let allNum = num + otherNum
                this.$set(this.form,'contractOverdueCost',allNum.toFixed(2))
                let AllNum = 0
                AllNum = Number(val.otherNoPayoffCost) + Number(val.contractOverdueCost) + Number(val.contractPayoffCost) + Number(val.contractNoPayoffCost)
                this.$set(this.form,'allNoPayoffCost',AllNum.toFixed(2))
            } 
        },
        'form.resultOverDueVoList':{
            deep:true,
            handler(val){
                 // 合同期内已生成账单未结清费用
                 let unclearedNum = 0
                    let data = JSON.parse(JSON.stringify(val))
                    data?.map((info)=>{
                        if(info.costContractList){
                            info?.costContractList?.map((item)=>{
                                unclearedNum = Number(item.receivableAmount) + Number(unclearedNum)
                            })
                            
                        }   
                    })
                    
                    this.$set(this.form,'contractNoPayoffCost',unclearedNum.toFixed(2))
            }
        },
        'form.resultVoList':{
            deep:true,
            handler(val){
                 // 合同期内已生成账单已结清费用
                 let unclearedNum = 0
                    let data = JSON.parse(JSON.stringify(val))
                    data?.map((info)=>{
                        if(info.costContractList){
                            info?.costContractList?.map((item)=>{
                                unclearedNum = Number(item.receivableAmount) + Number(unclearedNum)
                            })
                            
                        }   
                    })
                    this.$set(this.form,'contractPayoffCost',unclearedNum.toFixed(2))
            }
        },
        'form.otherVoList':{
            deep:true,
            handler(val){
                this.form.otherVoList = val
                if(val?.length>0){
                    this.addMoneyStatus = false
                }else{
                    this.addMoneyStatus = true
                }
                let unclearedNum = 0
                    let data = JSON.parse(JSON.stringify(val))
                    data?.map((info)=>{
                        unclearedNum = Number(info.cost) + Number(unclearedNum)
                    })
                    
                    this.$set(this.form,'otherNoPayoffCost',unclearedNum.toFixed(2))
            },
        },
        'form.overdueJson':{
            deep:true,
            handler(value){
                if(value){
                    // const val = JSON.parse(value)
                    if(typeof value=='string'){
                        value =  value.replaceAll("\\", "").replaceAll("\"[", "[").replaceAll("]\"", "]")
                        const a = eval(value)
                        this.titleList = a[0]?.costJson?a[0]?.costJson:[]
                        this.$set(this.form,'overdueVoList',a)
                    }else{
                        this.titleList = value[0]?.costJson?value[0]?.costJson:[]
                        this.$set(this.form,'overdueVoList',value)
                    }
                    // if(typeof value[0]?.costJson=='string'){
                    //     this.titleList = value[0]?.costJson?JSON.parse(value[0]?.costJson):[]
                    // }else{
                    //     this.titleList = value[0]?.costJson?value[0]?.costJson:[]
                    // }
                    // this.$set(this.form,'overdueVoList',value)
                }     
            },
            immediate:true,
        }
    },
    async created(){
        this.typeList = await this._getDicts("progress_litigation");
        this.tableCloumns = [
        {
                    label: "费用类型",
                    prop: "proceedsTypeStr",

                },
                {
                    label: "费用金额",
                    prop: "receivableAmount",
                    format: (row) => {
                        return this.format_thousand(row.receivableAmount);
                    },
                },
                {
                    label: "期数",
                    prop: "periodsNum",
                },
               
                {
                    label: "应收日期",
                    prop: "repaymentTime",
                },
                {
                    label: "实收日期",
                    prop: "paymentTime",
                },
                
        ]
    },
    mounted() {
    },
    methods: {
        flow_submit(){
            this.form.overdueJson.map((res)=>{
                res.costJson = JSON.stringify(res.costJson)
            })
            this.$set(this.form,'overdueJson',JSON.stringify(this.form.overdueJson))
        },
        handleChange(){},
        handleChange1(){},
        // 添加费用项类型
        addFess(){
            this.dialogFormVisible = true
        },
        getcol(){
            this.addCol()
            this.dialogFormVisible = false   
        },
        //新增列
        addCol(){
            this.dialogFormVisible = true
            if(this.colName !==''){
                this.titleList.push(this.colName) 
                this.form.overdueVoList?.map((res)=>{
                    // res[this.colName] = null
                    this.$set(res,this.colName,'')
                })
                 this.colName = ''
            }
        },
        // 删除列
        titDelet(value){
            this.titleList?.map((res,index)=>{
                if(res==value){
                    this.titleList.splice(index,1)
                    this.form.overdueVoList = this.form.overdueVoList?.filter(item => item.key!== value);
                    return
                }
            })    
        },
        // 添加费用列表
        addCostItem(){
            let obj ={
                costType:null, 
                cost:0,
                v:null,
                id:new Date().getTime()
            }
            this.form.otherVoList.push(obj)
        },
        // 删除费用列表
        deletCostItem(info){
            this.form.otherVoList?.map((res,index)=>{
                if(res.id==info.id){
                    this.form.otherVoList.splice(index,1)
                }
            })
        }


    }
};
</script>


<style lang="scss" scoped>

.el-descriptions{
    margin: 0 -15px;
}
.btn_sty{
    position: absolute;
    right: 10px;
    top:0px
}
.delet_tit{
    float: right;
    cursor: pointer;
}
.el-descriptions {
    margin: 0 -15px;
}
.el-col{
    min-height: 80px;
}
.costSty{
    padding-left: 15px;
}

</style>
